<!-- 登录 注册页 的背景粒子效果组件 -->
<template>
    <div>
  <div id="login">
    <vue-particles
      class="login-bg"
      color="#39AFFD"
      :particleOpacity="0.7"
      :particlesNumber="100"
      shapeType="circle"
      :particleSize="4"
      linesColor="#8DD1FE"
      :linesWidth="2"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    >
    </vue-particles>
  </div>
</div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
#login {
  width: 100%;
  height: 90vh;
  position: absolute;
  left: 0;
  margin-top: -7vh;
  z-index: -1;
}
// 如果全屏展示
.login-bg {
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(to right, #e4afcb 0%, #b8cbb8 0%, #b8cbb8 0%, #e2c58b 30%, #c2ce9c 64%, #7edbdc 100%);
}
</style>